<template>
  <div>
    <el-dialog title="添加内容" :visible.sync="visible" width="700px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="上传文件" name="upload">
          <el-form>
            <el-form-item label="上传文件">
              <el-upload
                action=""
                :auto-upload="false"
                :on-change="handleFileChange">
                <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="MD文档" name="markdown">
          <el-form>
            <el-form-item label="Markdown内容">
              <el-input type="textarea" v-model="markdownContent" rows="10"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="题单" name="questions">
          <el-form>
            <el-form-item label="选择题单">
              <el-select v-model="questionSetId" placeholder="请选择题单">
                <el-option v-for="item in questionSets" 
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="素材库" name="resources">
          <el-form>
            <el-form-item label="选择素材">
              <el-table :data="resourceList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="素材名称"></el-table-column>
                <el-table-column prop="type" label="类型"></el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddContentDialog',
  mounted() {
    console.log('AddContentDialog mounted')
  },
  data() {
    return {
      activeName: 'upload',
      markdownContent: '',
      questionSetId: '',
      questionSets:[],
      resourceList:[],
      visible: false,
      contentType: '',
      section: {}
    }
  },
  methods: {
    open(section) {
      this.visible = true
      this.section = section
    },
    handleTabClick(tab, event) {
      console.log(tab, event)
    },
    handleFileChange(file, fileList) {
      console.log(file, fileList)
    },
    handleSubmit() {
      console.log('submit')
    },
    handleSelectionChange(selection, row) {
      console.log(selection, row)
    }
  } 
}
</script>
<style scoped>
.el-dialog__body {
  padding: 0px 20px;
}
</style>
